<template>
  <div class="shiti">
    <div class="bigbox" v-for="(v,i) in this.data" :key="i" @click="fun(v)">
        <div class="leftbox">
            <img :src="v.imgurl" alt="">
        </div>
        <div class="rightbox">
            <div class="title">
               {{v.title}}
            </div>
            <div class="p">{{v.site | xiaoming}}</div>
            <span>{{v.distance}}</span>
        </div>
    </div>
  </div>
</template>

<script>
import link from "@/api/link.js"
export default {
    data(){
        return{
            data:{}
        }
    },
    methods:{
        fun(v){
            this.$router.push({name:"repastxq",query:{xiaoming:v}})
        }
    },
    created(){
        link("/user/wkc/fourdata").then((ok)=>{
            // console.log(ok)
            this.data=ok.data.shiti
        })
    },
    filters:{
        xiaoming(val){
            if(val.length>10){
                return val.slice(0,9)+"..."
            }else{
                return val
            }
        }
    }
}
</script>

<style scoped lang="scss">
    .shiti{
        width: 100%;
        height: 100%;
        .bigbox{
            width: 90%;
            margin: auto;
            height: 1.12rem;
            display: flex;
            border-bottom: 0.01rem solid rgb(204, 203, 203);
            .leftbox{
                width: 35%;
                height: 100%;
                text-align: center;
                img{
                    width: 80%;
                    height: 80%;
                    vertical-align: middle;
                }
            }
            .rightbox{
                width: 65%;
                height: 100%;
                position: relative;
            .title{
                width: 100%;
                font-size: 0.18rem;
                margin-top: 0.04rem;
            }
            .p{
                width: 70%;
                font-size: 0.14rem;
                position: absolute;
                bottom: 0;
                color: gray;
            }
            span{
                position: absolute;
                right: 0;
                bottom: 0;
                font-size: 0.14rem;
                color: gray;
            }
            }
        }
    }
</style>